<!DOCTYPE html>
<html>
    <head>
        <link rel='match' href='transform_3d_ref.html'>
        <style type="text/css">
            #div_t3d_1 {
                position: absolute;
                background-color: red;
                top: 10px;
                left: 10px;
                width: 40px;
                height: 40px;
            }

            #div_t3d_2 {
                position: absolute;
                background-color: green;
                top: 10px;
                left: 10px;
                width: 20px;
                height: 20px;
                transform: translate3d(50%, 50%, 0);
            }

            #div_t3d_3 {
                position: absolute;
                background-color: red;
                top: 10px;
                left: 60px;
                width: 40px;
                height: 40px;
            }

            #div_t3d_4 {
                position: absolute;
                background-color: green;
                top: 10px;
                left: 10px;
                width: 20px;
                height: 20px;
                transform: translate3d(-5px, 10px, 0);
            }

            #div_s3d_1 {
                position: absolute;
                background-color: red;
                top: 10px;
                left: 110px;
                width: 40px;
                height: 40px;
            }

            #div_s3d_2 {
                position: absolute;
                background-color: green;
                top: 10px;
                left: 10px;
                width: 20px;
                height: 20px;
                transform: scale3d(0.5, 2, 1);
            }

            #div_r3d_1 {
                position: absolute;
                background-color: red;
                top: 60px;
                left: 10px;
                width: 40px;
                height: 40px;
            }

            #div_r3d_2 {
                position: absolute;
                background-color: green;
                top: 10px;
                left: 10px;
                width: 10px;
                height: 20px;
                transform: rotateZ(90deg);
            }

            #div_r3d_3 {
                position: absolute;
                background-color: red;
                top: 60px;
                left: 60px;
                width: 40px;
                height: 40px;
            }

            #div_r3d_4 {
                position: absolute;
                background-color: green;
                top: 10px;
                left: 10px;
                width: 10px;
                height: 20px;
                transform: rotate3d(0, 0, 1, 90deg);
            }
        </style>
    </head>
    <body>
        <div id="div_t3d_1">
            <div id="div_t3d_2">
            </div>
        </div>

        <div id="div_t3d_3">
            <div id="div_t3d_4">
            </div>
        </div>

        <div id="div_s3d_1">
            <div id="div_s3d_2">
            </div>
        </div>

        <div id="div_r3d_1">
            <div id="div_r3d_2">
            </div>
        </div>

        <div id="div_r3d_3">
            <div id="div_r3d_4">
            </div>
        </div>
    </body>
</html>
